const PAGE_SIZE = 10
export default {
  props: {
    options: Object,
    multiColumn: {
      type: Boolean,
      default: false
    },
    fixed: {
      type: Boolean,
      default: false
    },
    hasTotal: {
      type: Boolean,
      default: true
    },
    hasSelection: {
      type: Boolean,
      default: false
    },
    hasIndex: {
      type: Boolean,
      default: false
    },
    hasExpand: {
      type: Boolean,
      default: false
    },
    singleSelect: {
      type: Boolean,
      default: false
    },
    selectionRemember: {
      type: Boolean,
      default: false
    },
    clearSelection: {
      type: Boolean,
      default: false
    },
    tableMaxHeight: ''
  },
  data() {
    return {
      innerData: [],
      columns: [],
      page: {
        pageNo: 1,
        pageSize: PAGE_SIZE,
        total: 0
      },
      loading: false,
      showPagination: true,
      maxHeight: Infinity,
      sort: {},
      multipleSelection: [],
      getRowKeys(row) {
        return row.id
      }
    }
  },
  created() {
    this.initTable()
  },
  mounted() {},
  beforeDestroy() {
    if (this._scrollHandler) {
      $(window).off('scroll', this._scrollHandler)
    }
  },
  watch: {
    options: {
      handler() {
        this.initTable()
      },
      deep: true
    },
    clearSelection() {
      this.$nextTick(() => {
        this.$refs.table.clearSelection()
      })
      this.multipleSelection = []
    }
  },
  methods: {
    async initTable() {
      this.columns = this.options.columns
      this.page.pageNo = 1
      this.page.current = 1
      // 清空勾选
      this.$nextTick(() => {
        this.$refs.table.clearSelection()
      })
      this.multipleSelection = []
      if (this.options.service) {
        try {
          // 服务端模式
          this.loading = true
          let resp = await this.getRemoteData()
          this.loading = false
          this.showPagination = true
          this.page.total = Number(resp.total)
          this.$emit('getTotal', this.page.total)
          this.innerData = this.options.washData
            ? resp.data.map(this.options.washData)
            : resp.data
        } catch (error) {
          console.log(error)
          this.loading = false
        }
      } else {
        // 客户端模式，暂时完全不分页
        this.showPagination = false
        this.innerData = this.options.washData
          ? this.options.data.map(this.options.washData)
          : this.options.data
      }
      if (this.fixed) {
        this.maxHeight = window.screen.availHeight - $(this.$el).offset().top
      }
    },
    getRemoteData() {
      let extra = this.options.extra || {}
      return this.options.service({
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        ...extra,
        ...this.sort
      })
    },
    async refreshList() {
      this.loading = true
      let resp = await this.getRemoteData()
      this.loading = false
      this.page.total = Number(resp.total)
      this.$emit('getTotal', this.page.total)
      this.innerData = this.options.washData
        ? resp.data.map(this.options.washData)
        : resp.data
    },
    handleRowClick(a) {
      this.$emit('rowClick', a)
    },

    handleExpandChange(row) {
      this.$emit('expandChange', row)
    },

    prevPage() {
      this.page.pageNo--
      this.refreshList()
    },

    jumpPage(pageNo) {
      this.page.pageNo = pageNo
      this.refreshList()
    },

    nextPage() {
      this.page.pageNo++
      this.refreshList()
    },

    goFirstPage() {
      this.page.pageNo = 1
      this.refreshList()
    },

    getRowClassName(data) {
      let { row, rowIndex } = data
      if (this.options.isDisabled) {
        return this.options.isDisabled(row) ? 'f-table__row--disabled' : ''
      } else if (rowIndex % 2 !== 0) {
        return 'hight-light'
      }
    },

    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.initTable()
    },

    async handleSortChange(opt) {
      if (opt.column && opt.order) {
        this.sort = {
          'order[0][column]': opt.prop,
          'order[0][dir]': opt.order === 'ascending' ? 'asc' : 'desc'
        }
      } else {
        this.sort = {}
      }
      this.refreshList()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$emit('multipleSelection', this.multipleSelection)
    },

    handleCurrentChange(val) {
      this.$emit('singleSelection', val)
    }
  }
}
